<template>
	<div id="priceConfig">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title" @click="cancelVenue()">场馆管理</span>
			<span class="title" @click="cancel()">/ 场地管理</span>
			<span>/ 价格设置</span>
		</div>
		<div class="search">
			<span>场地名称：{{fieldName}}</span>
			<el-button type="primary" class="cancel" @click="cancel()">返回</el-button>
		</div>

		<div class="list">
			<div class="list_head">
				<span class="label">身份筛选</span>
				<el-select v-model="identity" @change="getPriceDetail()">
					<el-option v-for='item in identities' :label='item.identityName' :key="item.identityName" :value='item.identityId'></el-option>
				</el-select>
				<el-button class="priceBtn" type="primary" style="margin-left:10px;" @click="unPacking">解包</el-button>
				<el-button class="priceBtn" type="primary" style="margin-left:10px;" @click="openPackDialog">打包</el-button>
				<el-button class="priceBtn" type="primary" style="margin-left:10px;" @click="openEmptyDialog">清空价格</el-button>
				<el-button class="priceBtn" type="primary" style="margin-left:10px;" @click="setPrice">设置价格</el-button>
			</div>
			<div style="width:100%;">
				<div style="width:100%;">
					<span v-for="item in days" :key="item.index" :class="item.class" @click="selectDay(item)">{{item.name}}</span>
				</div>
			</div>
			<div id="box">
				<div id="timeBox">
					<span v-for="item in times" :key="item" class="time">{{item}}</span>
				</div>
				<div id='liBox'>
					<div id="widthauto" @mousedown="mDown($event)" @mousemove.stop="move($event)" @mouseup="mUp($event)" @mouseleave="mLeave()">
						<ul v-for="item in options" :key="item.name">
							<li class="priceTitle" style="width:70px;color:#333;">{{item.name}}</li>
							<li v-for="ele in item.venueFieldGoods" :data-obj="JSON.stringify(ele)" :key="ele" v-if="ele" class="priceNormal" :style="ele.length">{{ele.price}}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<el-dialog title="设置价格" :visible.sync="dialogFormVisible_priceConfig">
			<el-form :model="priceConfigForm" :label-width="formLabelWidth" :rules="setRules" ref="priceConfigForm">
				<el-form-item label="售卖数量" required prop="count">
					<el-input v-if="chargeType == 2" type="number" v-model.number="priceConfigForm.count" auto-complete="off"></el-input>
					<el-input v-else type="number" v-model.number="priceConfigForm.count" auto-complete="off" disabled></el-input>
				</el-form-item>
				<el-form-item :label="item.identityName" required v-for="(item, $index) in identities" :key="item.identityId">
					<el-input v-model.number="priceConfigForm.prices[$index].price" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="应用周期" required prop="days">
					<el-checkbox-group v-model="priceConfigForm.days">
						<el-checkbox label="1">星期一</el-checkbox>
						<el-checkbox label="2">星期二</el-checkbox>
						<el-checkbox label="3">星期三</el-checkbox>
						<el-checkbox label="4">星期四</el-checkbox>
						<br>
						<el-checkbox label="5">星期五</el-checkbox>
						<el-checkbox label="6">星期六</el-checkbox>
						<el-checkbox label="7">星期日</el-checkbox>
						<el-checkbox label="8">节假日</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="configPrice()">确定</el-button>
				<el-button :plain="true" type="primary" @click="dialogFormVisible_priceConfig = false">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="打包" :visible.sync="dialogFormVisible_packing">
			<el-form :model="packingForm" :label-width="formLabelWidth" :rules="packRules" ref="packingForm">
				<el-form-item label="售卖数量" required prop="count">
					<el-input v-if="chargeType == 2" type="number" v-model.number="packingForm.count" auto-complete="off"></el-input>
					<el-input v-else type="number" v-model.number="packingForm.count" auto-complete="off" disabled></el-input>
				</el-form-item>
				<el-form-item :label="item.identityName" required v-for="(item, $index) in identities" :key="item.identityId">
					<el-input v-model.number="packingForm.prices[$index].price" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="应用周期" required prop="days">
					<el-checkbox-group v-model="packingForm.days">
						<el-checkbox label="1">星期一</el-checkbox>
						<el-checkbox label="2">星期二</el-checkbox>
						<el-checkbox label="3">星期三</el-checkbox>
						<el-checkbox label="4">星期四</el-checkbox>
						<br>
						<el-checkbox label="5">星期五</el-checkbox>
						<el-checkbox label="6">星期六</el-checkbox>
						<el-checkbox label="7">星期日</el-checkbox>
						<el-checkbox label="8">节假日</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="packageOk()">确定</el-button>
				<el-button :plain="true" type="primary" @click="dialogFormVisible_packing = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			let checkCount = (rule, value, callback) => {
				if (value) {
					if (!Number.isInteger(value)) {
						callback(new Error("请输入正确的售卖数量"));
					} else {
						if (value <= 0) {
							callback(new Error("请输入正确的售卖数量"))
						} else {
							callback();
						}
					}
				} else {
					callback(new Error("请输入售卖数量"));
				}
			};
			let checkPrice = (rule, value, callback) => {
				if (value) {
					if (!/^\d+(?=\.{0,1}\d+$|$)/.test(value)) {
						callback(new Error("请输入正确的售卖价格"));
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入售卖价格"));
				}
			};
			let checkDays = (rule, value, callback) => {
				if (value) {
					if (value.indexOf(this.dayType) >= 0) {
						callback();
					} else {
						callback(new Error("应用周期应包含当前查询星期"));
					}
				} else {
					callback(new Error("请选择应用周期"));
				}
			};

			return {
				width: 0,
				height: 0,
				ismouseDown: false,
				venueId: "",
				fieldId: "",
				unid: "",
				startTime: "", //场馆开始时间
				endTime: "", //场馆结束时间
				start: "", //场地开始时间
				end: "", //场地结束时间
				chargeType: "", //小时制，半小时制
				fieldName: "",
				activeName: "first",
				identity: "",
				dayType: "1",
				identities: [],
				times: [],
				options: [],
				selectItem: [],
				setRules: {
					count: [
						// { required: true, message: "请输入卖数量", trigger: "blur" },
						{ validator: checkCount }
					],
					days: [
						{
							type: "array",
							required: true,
							message: "请选择应用周期",
							trigger: "change"
						},
						{ validator: checkDays }
					]
				},
				packRules: {
					count: [
						// { required: true, message: "请输入售卖数量", trigger: "blur" },
						{ validator: checkCount }
					],
					days: [
						{
							type: "array",
							required: true,
							message: "请选择应用周期",
							trigger: "change"
						},
						{ validator: checkDays }
					]
				},
				days: [
					{
						name: "星期一",
						index: "1",
						class: {
							days: true,
							selected: true
						}
					},
					{
						name: "星期二",
						index: "2",
						class: {
							days: true,
							selected: false
						}
					},
					{
						name: "星期三",
						index: "3",
						class: {
							days: true,
							selected: false
						}
					},
					{
						name: "星期四",
						index: "4",
						class: {
							days: true,
							selected: false
						}
					},
					{
						name: "星期五",
						index: "5",
						class: {
							days: true,
							selected: false
						}
					},
					{
						name: "星期六",
						index: "6",
						class: {
							days: true,
							selected: false
						}
					},
					{
						name: "星期日",
						index: "7",
						class: {
							days: true,
							selected: false
						}
					},
					{
						name: "节假日",
						index: "8",
						class: {
							days: true,
							selected: false
						}
					}
				],
				formLabelWidth: "80px",
				dialogFormVisible_priceConfig: false,
				dialogFormVisible_packing: false,
				priceConfigForm: {
					count: 1,
					prices: [],
					days: []
				},
				emptyPrice: {
					days: []
				},
				packingForm: {
					count: 1,
					prices: [],
					days: []
				},
				addboxLeft: "",
				isMove: false
			};
		},
		mounted() {
			this.unid = this.$util.getUrlParam("unid");
			this.venueId = this.$util.getUrlParam("venueId");
			this.fieldId = this.$util.getUrlParam("fieldId");
			this.endTime = this.$util.getUrlParam("endTime");
			this.startTime = this.$util.getUrlParam("startTime");
			this.fieldName = this.$util.getUrlParam("fieldName");
			this.getIdentityList();
			this.getFieldDetail();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			mDown(event) {
				// 按下
				this.ismouseDown = true;
				let div = document.createElement("div");
				div.id = "addBox";
				let pad = document.getElementById("widthauto");
				let evt = event || window.event;
				this.addboxLeft = evt.layerX;
				div.style.cssText = `position:fixed;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;
				border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;`;
				this.width = evt.clientX;
				this.height = evt.clientY;
				pad.appendChild(div);
			},
			mUp(event) {
				// 鼠标松开
				if (this.ismouseDown) {
					this.ismouseDown = false;
					let evt = event || window.event;
					let pad = document.getElementById("widthauto");
					let div = document.getElementById("addBox");
					let selList = document.getElementsByClassName("priceNormal");

					if (!this.isMove) {
						if (evt.target.className.indexOf("priceNormal") > -1) {
							let selObj = JSON.parse(evt.target.getAttribute('data-obj'));
							if (evt.target.className.indexOf("selected") == -1) {
								evt.target.className = evt.target.className + " selected";
								this.selectItem.push(selObj); // 新增选中的元素
								selObj = null;
							} else {
								evt.target.className = "priceNormal";
								// 删除选中的元素
								if (this.selectItem.length == 1) {
									this.selectItem.splice(0, 1);
								} else {
									this.selectItem.forEach((ele, index) => {
										if (
											ele.startHour == selObj.startHour &&
											ele.fieldNo == selObj.fieldNo
										) {
											this.selectItem.splice(index, 1);
										}
									});
								}
							}
						} else {
							this.selectItem = []; //重置
							for (let i = 0; i < selList.length; i++) {
								if (selList[i].className.indexOf("selected") > -1) {
									selList[i].className = "priceNormal";
								}
							}
						}
						pad.removeChild(div);
						return;
					}
					//-------------------------------------------------
					let divbox = div.getBoundingClientRect();
					this.selectItem = []; //重置
					let _l = divbox.left,
						_t = divbox.top,
						_r = divbox.right,
						_b = divbox.bottom;
					for (let i = 0; i < selList.length; i++) {
						let selbox = selList[i].getBoundingClientRect();
						let sr = selbox.right,
							sb = selbox.bottom,
							sl = selbox.left,
							st = selbox.top;
						let insetObj = selList[i].getAttribute('data-obj');
						if (sr > _l && sb > _t && sl < _r && st < _b) {
							if (insetObj) {
								this.selectItem.push(JSON.parse(insetObj)); // 添加
								insetObj = null;
							}
							if (selList[i].className.indexOf("selected") == -1) {
								selList[i].className = selList[i].className + " selected";
							}
						} else {
							if (selList[i].className.indexOf("selected") != -1) {
								selList[i].className = "priceNormal";
								// 删除
								this.selectItem.forEach((ele, index) => {
									if (
										ele.startHour == JSON.parse(insetObj).startHour &&
										ele.fieldNo == JSON.parse(insetObj).fieldNo
									) {
										this.selectItem.splice(index, 1);
									}
								});
							}
						}
					}
					this.isMove = false;
					pad.removeChild(div);
				}
			},
			move(event) {
				if (this.ismouseDown) {
					this.isMove = true;
					let div = document.getElementById("addBox");
					let evt = event || window.event;
					let nwidth = evt.clientX;
					let nheight = evt.clientY;
					if (div.style.display == "none") {
						div.style.display = "";
					}
					div.style.top = Math.min(nheight, this.height) + "px";
					div.style.left = Math.min(nwidth, this.width) + "px";
					div.style.width = Math.abs(nwidth - this.width - 2) + "px";
					div.style.height = Math.abs(nheight - this.height - 2) + "px";
				}
			},

			// 移除选中状态
			mLeave() {
				if (this.ismouseDown) {
					let pad = document.getElementById("widthauto");
					let child = document.getElementById("addBox");
					pad.removeChild(child);
					this.ismouseDown = false;
				}
			},

			cancel() {
				let pageNum = this.$util.getUrlParam("pageNum");
				let params = {
					pageNum,
					unid: this.unid,
					venueId: this.venueId,
					endTime: this.endTime,
					startTime: this.startTime
				}
				this.$util.refreshTo("/#/fieldManage", params);
			},
			//身份列表
			getIdentityList() {
				let url = this.$util.domain + "/erp/api/v20/tools/campusidentity";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let identityList = response.data.data;
						if (identityList && identityList.length > 0) {
							this.identity = identityList[0].identityId;
							for (let i = 0; i < identityList.length; i++) {
								let $identityId = identityList[i].identityId,
									$identityName = identityList[i].identityName;
								this.identities.push({
									identityId: $identityId,
									identityName: $identityName
								});
								this.priceConfigForm.prices.push({
									price: "",
									identityId: $identityId
								});
								this.packingForm.prices.push({
									price: "",
									identityId: $identityId
								});
							}
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//获取场地详情
			getFieldDetail() {
				let url = this.$util.domain + "/erp/api/v20/venue/field/detail";

				this.$http({
					url,
					method: "GET",
					params: {
						fieldId: parseInt(this.fieldId)
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						this.end = dataObj.openEndTime;
						this.start = dataObj.openStartTime;
						this.chargeType = dataObj.chargeType + "";
						this.addTimeItem();
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//数组排序
			sortby(name) {
				return function (o, p) {
					let a, b;
					if (typeof o === "object" && typeof p === "object" && o && p) {
						a = o[name];
						b = p[name];
						if (a === b) {
							return 0;
						}
						if (typeof a === typeof b) {
							return a < b ? -1 : 1;
						}
						return typeof a < typeof b ? -1 : 1;
					} else {
						throw "error";
					}
				};
			},
			//价格查询
			getPriceDetail() {
				let url = this.$util.domain + "/erp/api/v20/venue/field/price";
				this.selectItem = [];

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						dayType: this.dayType * 1,
						fieldId: this.fieldId * 1,
						identityId: this.identity * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.options = response.data.data;
						this.options = this.options.sort(this.sortby("fieldNo"));
						this.options.forEach((item, index) => {
							let dataList = item.venueFieldGoods;
							if (dataList && dataList.length > 0) {
								item.venueFieldGoods = this.equipData(
									this.start,
									this.end,
									item.venueFieldGoods
								);
							} else {
								item.venueFieldGoods = this.addBlankData(this.start, this.end);
							}
							item.venueFieldGoods.forEach(ele => {
								ele.sheetId = item.id;
								ele.fieldNo = item.fieldNo;
							});
						});
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//打开设置价格对话框
			setPrice() {
				if (this.selectItem.length == 0) {
					this.$util.errorMsg("请选择场次时段");
				} else {
					this.priceConfigForm.days = [this.dayType + ""];
					this.dialogFormVisible_priceConfig = true;
				}
			},
			//设置价格
			configPrice() {
				let url = this.$util.domain + "/erp/api/v20/venue/field/setprice";
				let newArr = [];
				let hasBlankData = false;

				this.priceConfigForm.prices.forEach((item, index) => {
					if (!item.price && item.price != '0') {
						hasBlankData = true;
					} else {
						if (!/^\d+(?=\.{0,1}\d+$|$)/.test(item.price)) {
							hasBlankData = true;
						}
					}
				});
				if (hasBlankData) {
					this.$util.errorMsg("价格输入有误");
					return;
				}
				this.$refs.priceConfigForm.validate(valid => {
					if (valid) {
						for (let i = 0; i < this.selectItem.length; i++) {
							newArr.push({
								endHour: this.selectItem[i].endHour,
								fieldNo: this.selectItem[i].fieldNo,
								sheetId: this.selectItem[i].sheetId,
								prices: this.priceConfigForm.prices,
								count: this.priceConfigForm.count * 1,
								startHour: this.selectItem[i].startHour,
								goodsId: this.selectItem[i].id == "0" ? "" : this.selectItem[i].id,
							});
						}
						let days = [];
						for (let i = 0; i < this.priceConfigForm.days.length; i++) {
							days.push(this.priceConfigForm.days[i] * 1);
						}

						this.selectItem = [];
						this.unSelectLi();
						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								dateTypes: days,
								sheetGoodsList: newArr,
								fieldId: this.fieldId * 1,
								venueId: this.venueId * 1,
								nowDayType: this.dayType * 1
							})
						}).then(response => {
							this.dialogFormVisible_priceConfig = false;
							if (response.data.error == 10000) {
								this.$util.successMsg("价格设置成功");
								this.getPriceDetail();
							} else {
								this.$util.errorMsg(response.data.message);
							}
						});
					}
				});
			},
			//打开清空价格的对话框
			openEmptyDialog() {
				if (this.selectItem.length == 0) {
					this.$util.errorMsg("请选择场次时段");
				} else {
					let HasPriceData = false;
					this.selectItem.forEach(item => {
						if (item.id !== "0") {
							HasPriceData = true;
						}
					});
					if (!HasPriceData) {
						this.$util.errorMsg("所选场次时段均未设置价格项，请重新选择");
					} else {
						this.emptyPrices();
					}
				}
			},
			//清空价格
			emptyPrices(action) {
				let url = this.$util.domain + "/erp/api/v20/venue/field/clearprice";
				let newArr = [];
				this.selectItem.forEach((item, index) => {
					newArr.push(item.id);
				});
				let tipMessage;
				if (action) {
					tipMessage = "解包成功";
				} else {
					tipMessage = "成功清空价格";
				}

				this.selectItem = [];
				this.unSelectLi();
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						goodsIds: newArr
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.$util.successMsg(tipMessage);
						this.getPriceDetail();
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//打开打包对话框
			openPackDialog() {
				let isError = false;
				let errorMessage;

				if (this.selectItem.length == 0) {
					isError = true;
					errorMessage = "请选择场次时段";
				} else if (this.selectItem.length == 1) {
					isError = true;
					errorMessage = "1个片场无法进行打包";
				} else {
					let dataObj = this.isTimeContinuity(this.selectItem);
					if (!dataObj.isContinue) {
						isError = true;
						errorMessage = "请选择连续时段";
					} else {
						this.selectItem.forEach(item => {
							if (item.id !== "0") {
								isError = true;
								errorMessage = "所选场次时段包含已设置价格项，请先清空价格";
							}
							if (item.sheetId !== this.selectItem[0].sheetId) {
								isError = true;
								errorMessage = "不同场片之间无法进行打包";
							}
						});
					}
				}
				if (isError) {
					this.$util.errorMsg(errorMessage);
				} else {
					this.packingForm.days = [this.dayType + ""];
					this.dialogFormVisible_packing = true;
				}
			},
			//打包
			packageOk() {
				let url = this.$util.domain + "/erp/api/v20/venue/field/setprice";
				let newArr = [];
				let hasBlankData = false;
				this.packingForm.prices.forEach((item, index) => {
					if (!item.price && item.price != '0') {
						hasBlankData = true;
					}
				});
				if (hasBlankData) {
					return;
				}
				this.$refs.packingForm.validate(valid => {
					if (valid) {
						let dataObj = this.isTimeContinuity(this.selectItem);

						newArr.push({
							endHour: dataObj.endHour,
							startHour: dataObj.startHour,
							prices: this.packingForm.prices,
							count: this.packingForm.count * 1,
							sheetId: this.selectItem[0].sheetId,
							fieldNo: this.selectItem[0].fieldNo,
							goodsId: this.selectItem[0].id == "0" ? "" : this.selectItem[i].id
						});
						let days = [];
						for (let i = 0; i < this.packingForm.days.length; i++) {
							days.push(this.packingForm.days[i] * 1);
						}
						this.selectItem = [];
						this.unSelectLi();

						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								dateTypes: days,
								sheetGoodsList: newArr,
								fieldId: this.fieldId * 1,
								venueId: this.venueId * 1,
								nowDayType: this.dayType * 1
							})
						}).then(response => {
							this.dialogFormVisible_packing = false;
							if (response.data.error == 10000) {
								this.$util.successMsg("打包成功");
								this.getPriceDetail();
							} else {
								this.$util.errorMsg(response.data.message);
							}
						});
					}
				});
			},
			//解包
			unPacking() {
				let isError = false;
				let errorMessage;
				if (this.selectItem.length == 0) {
					isError = true;
					errorMessage = "请选择连续时段";
				} else {
					this.selectItem.forEach(item => {
						if (item.id == "0") {
							isError = true;
							errorMessage = "所选场次时段包含未设置价格项，请重新选择";
						}

						if (item.length.width == "55px") {
							isError = true;
							errorMessage = "选择的场地里含有未打包场地,无法进行解包,请重新选择";
						}
					});
				}
				if (isError) {
					this.$util.errorMsg(errorMessage);
				} else {
					this.emptyPrices(1);
				}
			},
			selectDay(ele) {
				this.dayType = ele.index;
				this.unSelectLi();
				this.getPriceDetail();
				this.days.forEach((item, index) => {
					if (item.index == ele.index) {
						item.class = {
							days: true,
							selected: true
						};
					} else {
						item.class = {
							days: true,
							selected: false
						};
					}
				});
			},
			//清除选中效果
			unSelectLi() {
				let selList = document.getElementsByClassName("priceNormal");
				for (let i = 0; i < selList.length; i++) {
					if (selList[i].className.indexOf("selected") != -1) {
						selList[i].className = "priceNormal";
					}
				}
				this.selectItem = [];
			},
			//向页面添加时间点
			addTimeItem() {
				let unitLength = "";
				let startTime, endTime;
				let today = new Date().format("yyyy/MM/dd");
				if (this.chargeType == 1) {
					unitLength = 3600 * 1000; //小时制
					let pstartTime = new Date(today + " " + this.start).getTime();
					let pendTime = new Date(today + " " + this.end).getTime();
					startTime = this.start;
					if (Number.isInteger((pendTime - pstartTime) / unitLength)) {
						endTime = this.end;
					} else {
						if (this.end.split(":")[1] == "00") {
							endTime = this.end.split(":")[0] * 1 + ":30";
						} else {
							endTime = this.end.split(":")[0] * 1 + 1 + ":00";
						}
					}
				} else {
					unitLength = 1800 * 1000; //半小时制
					startTime = this.start;
					endTime = this.end;
				}

				startTime = new Date(today + " " + startTime).getTime();
				endTime = new Date(today + " " + endTime).getTime();
				let length = (endTime - startTime) / unitLength;
				// 设置宽度
				document.getElementById('liBox').style.width = (length * 55 + 130) + 'px';
				document.getElementById('timeBox').style.width = (length * 55 + 130) + 'px';
				for (let i = 0; i <= length; i++) {
					let hour = new Date(startTime).format("hh:mm");
					this.times.push(hour);
					startTime = startTime + unitLength;
				}
			},
			//直接生成1行空白数据
			addBlankData(start, end) {
				let unitLength = "";
				if (this.chargeType == 1) {
					unitLength = 3600 * 1000; //小时制
				} else {
					unitLength = 1800 * 1000; //半小时制
				}
				let today = new Date().format("yyyy/MM/dd");
				let startTime = today + " " + start;
				let endTime = today + " " + end;
				startTime = new Date(startTime).getTime();
				endTime = new Date(endTime).getTime();
				let timeLength = (endTime - startTime) / unitLength;
				let newArr = [];
				for (let i = 0; i < timeLength; i++) {
					newArr.push({
						startHour: new Date(startTime).format("hh:mm"),
						endHour: new Date(startTime + unitLength).format("hh:mm"),
						id: "0",
						canReverse: 1,
						length: { width: "55px", num: 1 },
						price: ""
					});
					startTime += unitLength;
				}
				return newArr;
			},
			//将空余时间数据补充完整
			equipData(start, end, list) {
				let unitLength = "";
				if (this.chargeType == 1) {
					unitLength = 3600 * 1000; //小时制
				} else {
					unitLength = 1800 * 1000; //半小时制
				}
				let today = new Date().format("yyyy/MM/dd");
				let startTime = today + " " + start;
				let endTime = today + " " + end;
				startTime = new Date(startTime).getTime();
				endTime = new Date(endTime).getTime();
				let timeLength = (endTime - startTime) / unitLength;
				let newArr = [];
				list = list.sort(this.sortby("startHour"));

				list.forEach((item, index) => {
					for (let j = 0; j < timeLength; j++) {
						if (
							item.startHour == new Date(startTime).format("hh:mm")
						) {
							let length =
								(new Date(today + " " + item.endHour).getTime() -
									new Date(today + " " + item.startHour).getTime()) /
								unitLength;
							newArr.push({
								id: item.id,
								price: item.price,
								endHour: item.endHour,
								startHour: item.startHour,
								canReverse: item.canReverse,
								length: { width: length * 55 + "px", num: length }
							});
							startTime = new Date(today + " " + item.endHour).getTime();
							if (index == list.length - 1) {
								if (endTime == startTime) {
									//时间段已经用完
									return;
								} else {
									let length = (endTime - startTime) / unitLength;
									for (let k = 0; k < length; k++) {
										newArr.push({
											id: "0",
											price: "",
											canReverse: 1,
											length: { width: "55px", num: 1 },
											startHour: new Date(startTime).format("hh:mm"),
											endHour: new Date(startTime + unitLength).format("hh:mm")
										});
										startTime += unitLength;
									}
								}
								return;
							} else {
								return;
							}
						} else if (item.startHour > new Date(startTime).format("hh:mm")) {
							newArr.push({
								id: "0",
								price: "",
								canReverse: 1,
								length: { width: "55px", num: 1 },
								startHour: new Date(startTime).format("hh:mm"),
								endHour: new Date(startTime + unitLength).format("hh:mm")
							});
							startTime += unitLength;
						}
					}
				});
				return newArr;
			},
			//判断所选项是否是连续时间
			isTimeContinuity(list) {
				let unitLength = "";

				if (this.chargeType == 1) {
					unitLength = 3600 * 1000; //小时制
				} else {
					unitLength = 1800 * 1000; //半小时制
				}
				list = list.sort(this.sortby("startHour"));
				let length = 0;
				list.forEach((item, index) => {
					length += item.length.num;
				});

				let start = list[0].startHour;
				let end = list[list.length - 1].endHour;
				let today = new Date().format("yyyy/MM/dd");
				let startTime = new Date(today + " " + start).getTime();
				let endTime = new Date(today + " " + end).getTime();
				let timeLength = (endTime - startTime) / unitLength;
				if (timeLength == length) {
					return {
						endHour: end,
						isContinue: true,
						startHour: start
					};
				} else {
					return {
						endHour: end,
						startHour: start,
						isContinue: false
					};
				}
			},
			// 返回场馆列表
			cancelVenue() {
				location.href = "/#/venueManage";
			},
		}
	};
</script>

<style scoped>
	.black {
		background: #666666;
	}

	.search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
		position: relative;
	}

	#liBox ul li {
		width: 60px;
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}

	#priceConfig {
		padding-top: 60px;
		height: calc(100% - 100px);
		font-family: "Microsoft Yahei";
	}

	.title {
		color: #0398FF;
	}

	#priceConfig .cancel {
		top: 12px;
		margin-right: 25px;
	}

	.label {
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 14px;
		color: #333333;
		height: 40px;
		line-height: 1;
		padding: 11px 12px 11px 0;
		box-sizing: border-box;
		font-family: "Microsoft Yahei";
	}

	.priceBtn {
		float: right;
	}

	.days {
		display: inline-block;
		width: 85px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		color: #404040;
		border: solid 1px #e6e6e6;
		text-align: center;
		margin-left: 20px;
		margin-bottom: 10px;
		cursor: pointer;
		background: #ffffff;
		font-family: "Microsoft Yahei";
	}

	#priceConfig .selected {
		background: #333744;
		color: #ffffff;
	}

	#priceConfig #liBox .selected {
		background: #333744;
		color: #ffffff;
	}

	#box {
		width: 100%;
		min-height: 300px;
		margin-top: 20px;
		background: #ffffff;
		overflow: scroll;
		font-family: "Microsoft Yahei";
	}

	#timeBox {
		width: 300%;
		margin-top: 20px;
		font-family: "Microsoft Yahei";
	}

	#liBox {
		width: 200%;
	}

	#widthauto {
		display: inline-block;
		position: relative;
		border-top: solid 1px #e6e6e6;
	}

	#timeBox span:first-child {
		display: inline-block;
		margin-left: 50px;
	}

	#liBox ul {
		overflow: hidden;
	}

	#liBox ul>li {
		float: left;
		border-bottom: solid 1px #e6e6e6;
		border-right: solid 1px #e6e6e6;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 12px;
		color: #999999;
		cursor: pointer;
		box-sizing: border-box;
		list-style: none;
		font-family: "Microsoft Yahei";
	}

	#liBox ul>li.priceActive {
		background: #333744;
		color: #ffffff;
	}

	#priceConfig .time {
		/* display: inline-block; */
		float: left;
		color: #333333;
		margin-left: 18.78px;
		margin-bottom: 20px;
		font-size: 14px;
		font-family: "Microsoft Yahei";
	}


	/*滚动条 start*/

	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
		background-color: #F5F5F5;
	}


	/*定义滚动条轨道 内阴影+圆角*/

	::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background: #fff;
	}


	/*定义滑块 内阴影+圆角*/

	::-webkit-scrollbar-thumb {
		border-radius: 3px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: transparent;
	}

	::-webkit-scrollbar-thumb:hover {
		border-radius: 3px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: rgba(7, 170, 247, 1);
	}
</style>